html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
  color: #000000;
  background-color: #f9f9fb;
  text-shadow: 1px 1px 3px #cccccc;
  font-family: Helvetica, Arial, Meiryo, "Microsoft JhengHei", "Microsoft YaHei",
    sans-serif;
}
a,
a:hover {
  color: #006cca;
}

.page-header {
  border-bottom: 1px solid #9e9e9e;
}
.navbar {
  margin-bottom: 0;
}
.header {
  background-color: #60738b;
  border-radius: 0;
}
.header a {
  color: #ffffff;
  transition: background-color 0.2s ease-out;
}
.header .active {
  color: #cccccc;
  background-color: #485667;
  transition: background-color 0.2s ease-out;
}
.header li > a:hover {
  background-color: #485667;
  transition: background-color 0.2s ease-out;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #60738b;
}
.footer .breadcrumb {
  background-color: inherit;
  text-align: center;
}
.footer .breadcrumb a {
  color: #fff;
}

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
  text-align: justify;
}
.container .text-muted {
  margin: 20px 0;
}

.result img {
  width: 295px;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #ffffff;
    background-color: #000000;
    text-shadow: 1px 1px 3px #848484;
  }
  a,
  a:hover {
    color: #97cdfd;
  }
}
